<!--
 * @Author: Mr.Hope
 * @LastEditors: Mr.Hope
 * @Description: 基础页面显示
 * @Date: 2019-02-24 22:21:25
 * @LastEditTime: 2019-11-20 18:03:40
-->
<template>
  <div class="container page">
    <component :is="item.tag" v-for="item in myData" :key="item.id" v-bind="item" />
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import BaseCarousel from '#/base/Carousel.vue';
import BaseFoot from '#/base/Foot.vue';
import BaseHead from '#/base/Head.vue';
import BaseImg from '#/base/Img.vue';
import BaseList from '#/base/List.vue';
import BaseP from '#/base/P.vue';
import BasePhone from '#/base/Phone.vue';
import BaseTitle from '#/base/Title.vue';

@Component({
  components: {
    BaseHead,
    BaseTitle,
    BaseP,
    BaseImg,
    BaseList,
    BaseCarousel,
    BasePhone,
    BaseFoot
  }
})
export default class BasePage extends Vue {
  // Page data
  @Prop({ type: String, required: true, default: '[{"tag":"error"}]' })
  private readonly pagedata!: string;

  // Handle Data to change tags
  private get myData() {
    const pageData = JSON.parse(this.pagedata);
    const imageList: string[] = [];

    pageData.forEach((element: any, index: number) => {
      element.myId = index;
      element.tag = `base-${element.tag}`;
      if ('src' in element) imageList.push(element.src);
    });

    this.$store.commit('imageList', imageList);

    return pageData;
  }
}
</script>
<style lang="stylus" scoped>
.page
  color #000
</style>
